<template>
  <div class="wagePayment">
    <div class="wagePayment">
      <div class="wagePayment_title">工资支付</div>
    </div>
    <p style="text-align: center">累计支付工资（元）</p>
    <p style="color: #333333;font-size: 28px;text-align: center">{{this.wagePayTotal}}</p>
    <a-table :columns="columns3" :data-source="data3" :pagination="false">
      <a @click="goSalaryInformation(column,1)" slot="1" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,2)" slot="2" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,3)" slot="3" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,4)" slot="4" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,5)" slot="5" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,6)" slot="6" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,7)" slot="7" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,8)" slot="8" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,9)" slot="9" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,10)" slot="10" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,11)" slot="11" slot-scope="text,column">{{ text }}</a>
      <a @click="goSalaryInformation(column,12)" slot="12" slot-scope="text,column">{{ text }}</a>
    </a-table>
  </div>
</template>

<script>
const columns3 = [
  {
    title: '年份',
    dataIndex: 'year',
    key: 'year',
    align:'center'
  },
  {
    title: '年度累计支付',
    dataIndex: 'wageTotal',
    key: 'wageTotal',
    align:'center'
  },
  {
    title: '1月',
    dataIndex: '1',
    key: '1',
    scopedSlots: { customRender: '1' },
    align:'center'
  },
  {
    title: '2月',
    dataIndex: '2',
    key: '2',
    scopedSlots: { customRender: '2' },
    align:'center'
  },
  {
    title: '3月',
    dataIndex: '3',
    key: '3',
    scopedSlots: { customRender: '3' },
    align:'center'
  },
  {
    title: '4月',
    dataIndex: '4',
    key: '4',
    scopedSlots: { customRender: '4' },
    align:'center'
  },
  {
    title: '5月',
    dataIndex: '5',
    key: '5',
    scopedSlots: { customRender: '5' },
    align:'center'
  },
  {
    title: '6月',
    dataIndex: '6',
    key: '6',
    scopedSlots: { customRender: '6' },
    align:'center'
  },
  {
    title: '7月',
    dataIndex: '7',
    key: '7',
    scopedSlots: { customRender: '7' },
    align:'center'
  },
  {
    title: '8月',
    dataIndex: '8',
    key: '8',
    scopedSlots: { customRender: '8' },
    align:'center'
  },
  {
    title: '9月',
    dataIndex: '9',
    key: '9',
    scopedSlots: { customRender: '9' },
    align:'center'
  },
  {
    title: '10月',
    dataIndex: '10',
    key: '10',
    scopedSlots: { customRender: '10' },
    align:'center'
  },
  {
    title: '11月',
    dataIndex: '11',
    key: '11',
    scopedSlots: { customRender: '11' },
    align:'center'
  },
  {
    title: '12月',
    dataIndex: '12',
    key: '12',
    scopedSlots: { customRender: '12' },
    align:'center'
  }
]
import { queryYearTeamWage } from '@/api/gatewayTeamWage'
export default {
  data() {
    return {
      columns3,
      data3: [],
      wagePayTotal: ''
    }
  },
  methods: {
    getWage() {
      let data = {
        orgId: sessionStorage.getItem('gatewayId'),
        teamId: sessionStorage.getItem('teamId')
      }
      queryYearTeamWage(data).then((res) => {
        let data = res.data.data
        let arr = []
        if (data.length > 0) {
          this.wagePayTotal = data[0].wageTotal
          data.forEach((item, index) => {
            item.wageDetail['year'] = item.year
            item.wageDetail['wageTotal'] = item.yearWageTotal
            item.wageDetail['key'] = index
            arr.push(item.wageDetail)
          })
        }
        this.data3 = arr
        // console.log(this.data3);
      })
    },

    goSalaryInformation(val, title) {
      let month = ''
      if (title < 10) {
        month = '0' + title
      } else {
        month = title
      }
      this.yearMonth = val.year + '-' + month

      title = title.toString()
      //    console.log(title);
      // console.log(val[title]);
      if (val[title] == 0) {
        this.$message.destroy()
        this.$message.error('班组当月工资单不存在或尚未支付')
      } else {
        this.$router.push({
          path: '/salaryInformation',
          query: { peopleId: this.peopleId, yearMonth: this.yearMonth, teamId: this.teamId }
        })
      }
    }
  },
  mounted() {
    this.getWage()
  }
}
</script>

<style scoped>
::v-deep .ant-table-pagination.ant-pagination {
  display: none;
}
.part1_div {
  width: 375px;
  height: 50px;
  text-align: center;
}
/* .part1_div div{
    width: 100%;
    text-align: center;
} */
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 29px;
}
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.td_name {
  color: #1890ff;
  cursor: pointer;
}
/* .wagePayment{ */
/* height: 45px;
    border-bottom: 1px solid #ccc; */
/* margin-bottom: 30px; */
/* } */
.wagePayment_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
</style>
